import { onMounted } from 'vue'
const setRem = (maxFontsize?: number, isLandscape?: boolean, ratio?: number) => {
  const docEl = document.documentElement
  let { width } = docEl.getBoundingClientRect()
  if(width > 700){
    width = 700
  }
  let rem = width / (ratio || 7.5)
  if(isLandscape){
    rem = width / 13.86
    docEl.style.fontSize = `${rem}px`
    return
  }
  rem = parseFloat(rem.toFixed(3))
  if(maxFontsize){
    rem = maxFontsize
  }
  docEl.style.fontSize = `${rem}px`
}

/**
 * @description set rem
 * @param maxFontsize
 * @param isLandscape
 */
export const useRem = (maxFontsize?: number, isLandscape?: boolean, ratio?: number) => {
  onMounted(() => {
    setRem(maxFontsize, isLandscape, ratio)
    window.addEventListener('resize', () => {
      setRem(maxFontsize, isLandscape,ratio)
    })
  })
}
